<template>
    <div content="content">
        <TopSearchBar @search="onSearch" @click-left="onClickLeft"/>
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            class="all-goods"
        >
            <GoodsListCard :info="goodsInfoList"/>
        </van-list>
    </div>
</template>

<script>
    import TopSearchBar from "../../components/TopSearchBar";
    import GoodsListCard from "../../components/GoodsListCard";
    export default {
        name: "Search",
        components:{
            TopSearchBar,
            GoodsListCard
        },
        data() {
            return {
                keyword: "",
                page: 1,
                pages: 2,
                size: 10,
                categoryId: "",
                goodsInfoList: [],
                loading: false,
                finished: false,
                dict: ['热门', '最新', '精品', '爆款', '推荐'],
                imgSrc: [
                    require('@img/img-error.png')
                ],
            }
        },
        created() {
            let params = this.$route.query;
            if(params.keyword){
                this.keyword = params.keyword;
                this.getGoodsInfoList();
            }
        },
        methods: {
            onClickLeft() {
                this.$router.push({
                    path: "/category"
                })
            },
            onSearch(keyword){
                this.keyword = keyword;
                this.goodsInfoList = [];
                this.getGoodsInfoList();
            },
            async getGoodsInfoList() {
                let self = this;
                this.$api.getGoodsInfoList({
                    "beGroup": "",
                    "categoryId": "",
                    "goodsName": this.keyword,
                    "goodsSale": "",
                    "navigation": "",
                    "page": this.page,
                    "shopId": "",
                    "size": this.size
                }).then(res => {
                    if (res.data.data.list === []) {
                        self.finished = true;
                    } else {
                        self.page = res.data.data.pageNum;
                        self.pages = res.data.data.pages;
                        self.goodsInfoList.push(...res.data.data.list);
                        self.loading = false;
                    }
                });
            },
            onLoad() {
                if (this.page >= this.pages) {
                    this.finished = true
                } else {
                    this.page++;
                    this.getGoodsInfoList(this.activeCategoryId);
                }
            },
        }
    }
</script>

<style lang="scss" scoped>


</style>